<template>
    <div class="article-edit">
      <el-card class="!border-none" shadow="never">
        <el-page-header :content="$route.meta.title" @back="$router.back()"/>
      </el-card>
      <el-card class="mt-4 !border-none" shadow="never">
        <el-form
            ref="formRef"
            class="ls-form"
            :model="formData"
            label-width="120px"
            :rules="rules"
        >
          <div class="xl:flex">
            <div class="w-4/5">
              <div class="title">基础信息</div>
              <el-form-item label="申请城市" prop="area_id">
                    <el-select class="w-80 mr-16" v-model="formData.area_id" clearable filterable>
                        <el-option v-for="item in optionCity" :label="item.area_short_name"
                            :value="String(item.area_id)" :key="String(item.area_id)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="场地类型" prop="place_type">
                <el-select
                    class="w-80 mr-16"
                    v-model="formData.place_type"
                    placeholder="请选择"
                    clearable
                >
                    <el-option label="共享办公（场地有工位出租）" value="1" />
                    <el-option label="签约/洽谈中心（为同行提供免费洽谈场地）" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="link_person_name">
                <div class="w-80 mr-16">
                  <el-input
                      v-model="formData.link_person_name"
                      placeholder="请输入联系人"
                      :maxlength="11"
                      show-word-limit
                      clearable
                  />
                </div>
              </el-form-item>
              <el-form-item label="手机号" prop="link_person_phone">
                <div class="w-80 mr-16">
                  <el-input
                      v-model="formData.link_person_phone"
                      placeholder="请输入手机号"
                      :maxlength="11"
                      show-word-limit
                      clearable
                  />
                </div>
              </el-form-item>
              <el-form-item label="场地名称"  prop="location_name">
                <div class="w-80 mr-16">
                  <el-input
                      v-model="formData.location_name"
                      placeholder="请输入场地名称"
                      maxlength="255"
                      show-word-limit
                      clearable
                  />
                </div>
              </el-form-item>
  
              <el-form-item label="面积"  prop="size">
                <div class="w-80 mr-16">
                  <el-input
                      v-model="formData.size"
                      placeholder="请输入场地面积大小,单位m²"
                      type="text"
                      maxlength="255"
                      show-word-limit
                      clearable
                  >
                    <template #append>平方米</template>
                  </el-input>
                </div>
              </el-form-item>
  
              <el-form-item label="场地图" prop="images">
                <div class="w-80 mr-16">
                  <div>
                    <material-picker v-model="formData.images" :limit="6"/>
                  </div>
                  <div class="form-tips">建议尺寸：750*554px</div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-card>
      <footer-btns v-if="formData.status == 0">
        <el-button type="danger" @click="handleClose()" v-prevent-reclick="3000">审核驳回</el-button>
	    <el-button type="primary" @click="handleSubmit()" v-prevent-reclick="3000">审核通过</el-button>
      </footer-btns>
    
      <check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck" />
    </div>
  </template>
  
  <script lang="ts" setup name="bannerListsEdit">
  import type {FormInstance} from 'element-plus'
  import useMultipleTabs from '@/hooks/useMultipleTabs'
  import feedback from '@/utils/feedback';
  import useAppStore from '@/stores/modules/app'
  import check_demand from './check_demand.vue';
  import {checkPlaceApply} from '@/api/office/officePlace'

    const checkState = reactive({
        show: false,
        value: '',
        id: null
    })
    const handleConfirmCheck = async (value : any) => {
        console.log(value)
        await checkPlaceApply({
            ...value, 
            area_id: formData.area_id,
            status: 2
        })
        removeTab()
        router.back()
    }
  const useApp = useAppStore()
  const optionCity:any = useApp.optionCity;
  
  const route = useRoute()
  const router = useRouter()
  const formData:any = reactive({
    id: '',
    area_id: '',
    place_type: '',
    link_person_name: '',
    link_person_phone: '',
    location_name: '',
    size: '',
    remark: '',
    images: [],
    status: 0
  })
  
  const {removeTab} = useMultipleTabs()
  const formRef = shallowRef<FormInstance>()
  const rules = reactive({
    area_id: [{required: true, message: '申请城市不能为空', trigger: 'blur'}],
    place_type: [{required: true, message: '场地类型不能为空', trigger: 'blur'}],
    link_person_name: [{required: true, message: '联系人姓名不能为空', trigger: 'blur'}],
    link_person_phone: [{required: true, message: '手机号不能为空', trigger: 'blur'}],
    size: [{required: true, message: '请输入场地面积', trigger: 'blur'}],
    location_name: [{required: true, message: '位置不能为空', trigger: 'blur'}],
    images: [{required: true, message: '请选择场地图', trigger: 'blur'}],
  })
  
  const getDetails = async () => {
    console.log(route.query)
    Object.keys(route.query).forEach((key) => {
        //@ts-ignore
        formData[key] = route.query[key]
    })
  }
  
  const handleClose = async () => {
    checkState.show = true;
    checkState.value = formData.id;
  }
  const handleSubmit = async () => {
    await feedback.confirm('是否确认通过审核','审核通过')
    await checkPlaceApply({
        area_id: formData.area_id,
        id: formData.id,
        status: 1,
        reason: ''
    })
    removeTab()
    router.back()
  }
  
  route.query.id && getDetails()
  </script>
  
  <style scoped lang="scss">
  .title{
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 20px;
  }
  .title-txt{
    font-weight: 400;
    font-size: 12px;
    color: #f56c6c;
    margin-left: 10px;
  }
  .padding{
    padding-left: 40px;
    margin-bottom: 30px;
  }
  </style>
  